<template>
  <div style="background-color: white" class="mainClass">

    <el-container style="height: 550px; border: 1px solid #eee;">

      <el-aside width="220px" style="margin-top: 1%; margin-left:3%" >
        <div style="width: 100px; background-color: white;padding: 1px;
        margin-bottom: 30px; margin-left: 30px; margin-top: -40px">
          <img :src="UserImg"
               width="80px" height="80px" style="border-radius: 300px;margin-left: 1%">
          <p style="margin:0 auto;text-align: center" v-model="userInfo.nickname">您好：{{userInfo.nickname}}</p>
        </div>

        <el-menu :default-openeds="['1','2']" default-active="1-1">
          <el-submenu index="1">
          <!--运用changeTab切换内容页-->
            <template slot="title"><i class="el-icon-menu"></i>个人中心</template>
            <!-- 点击我的信息，将内容页改为Info -->
            <el-menu-item index="1-1" @click="changeTab('Info')" >我的信息</el-menu-item>
            <!--点击我的文章 将内容页改为MyArticle-->
            <el-menu-item index="1-2" @click="changeTab('MyArticle')" >我的文章</el-menu-item>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>我的社交</template>
            <!--点击好友管理 将内容页改为Friend-->
            <el-menu-item index="2-1" @click="changeTab('Friend')" >好友管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-main style="width: 1000px;">
        <div :is="currentView"></div>
      </el-main>

    </el-container>

  </div>
</template>

<script>
import {getUserInfo} from '@/api/login'
import {getToken} from '@/request/token'

import Info from '@/components/center/Info'
import MyArticle from '../components/center/MyArticle'
import Friend from '../views/blog/Friend'

export default {
  name: "Center",

  data() {
    return {
      user:{
        userpic :"../static/user/admin.png",
        username: '游客'
      },
      userInfo: {
        "account":'',
        "nickname":'',
        "avatar":''
      },
      currentView:'',
      UserImg: "../../static/user/admin.png"
    }
  },
  created() {
    this.getUserInfo();
    this.changeTab("Info");
  },
  components: {
    Info,
    MyArticle,
    Friend
  },
  methods: {
    changeTab(current) {
      this.currentView = current;
    },
    getUserInfo() {
      let token = getToken();
      let that = this
      getUserInfo(token).then(res => {
        that.userInfo = res.data
      }).catch(error => {
        if (error !== 'error') {
          that.$message({type: 'error', message: '用户信息加载失败！', showClose: true})
        }
      })
    }
  }

}
</script>

<style scoped>
.mainClass {
  margin-left: 50px;
}

.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.alink{

  text-decoration: none;
}
</style>

